<!-- 预览文章组件-->
<!-- 1.dialog的显示: :visible.sync-->
<!-- <hj-choose-video :visible.sync="visible"            // 弹框显示控制  (必填)-->
<!--                @close="visible=false"             // 注意这个visible和:visible.sync中的变量相同, 其实就是为了设置为false-->
<!--                ></hj-choose-video>-->
<template>
  <el-dialog :close-on-click-modal="false" :visible.sync="dialog" width="950px" style="margin-top: 3vh" @close="close">
    <div v-if="!!preview.previewUrlCode" id="iframe-container" class="phone">
      <iframe id="preview-iframe" :src="preview.previewUrlCode" style="margin-left: 26px;margin-top: 83px;height: 537px;" />
      <div class="preview-content" />
      <div class="preview-main">
        <div>
          <div class="preview-main-body">
            <div class="qr-code-img">
              <div class="qr-code-container">
                <span style="text-align: center">文章预览二维码</span>
                <el-image class="qrcode-img" :src="'https://api.pwmqr.com/qrcode/create/?url=' + preview.previewUrl" />
              </div>
            </div>
            <div v-if="preview.href" class="qr-code-img">
              <div class="qr-code-container">
                <span style="text-align: center">文章二维码</span>
                <el-image class="qrcode-img" :src="'https://api.pwmqr.com/qrcode/create/?url=' + preview.href" />
              </div>
            </div>
          </div>
          <div class="preview-main-text2">预览地址:</div>
          <div class="preview-url-copy">
            <div class="input-item">
              <el-input v-model="preview.previewUrlCode" readonly="readonly" />
            </div>
            <div class="preview-button">
              <el-button
                v-clipboard:copy="preview.previewUrlCode"
                v-clipboard:success="clipboardSuccess"
              >复制</el-button>
            </div>
          </div>
          <el-input v-model="preview.appLink" class="preview-input-appLink" readonly="readonly" />
          <h5>该地址仅用于内部预览，禁止用于传播否则后果自负</h5>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import request from '@/utils/request'
import bgPhone from '@/assets/icon/bg-phone.jpg'
import clipboard from '@/directive/clipboard/index.js'

export default {
  name: 'CommonAutocompleteTag',
  directives: { clipboard },
  props: {
    visible: Boolean,
    informationId: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      bgPhone: bgPhone,
      dialog: false,
      preview: {
        previewUrl: '',
        previewUrlCode: '',
        appLink: '',
        href: ''
      }
    }
  },
  watch: {
    informationId: function(val) {
      console.log('id改变：' + val)
      this.preview.appLink = 'v2gogo://openrouter/articleDetailPage?id=' + val;
    },
    visible: function(val) {
      console.log('显示状态改变')
      this.dialog = val;
      if (val) {
        this.preview.previewUrlCode = ''
        this.preview.previewUrl = ''
        this.loadPreview(this.informationId)
      }
    }
  },
  mounted: function() {
  },
  methods: {
    clipboardSuccess() {
      this.$message({
        message: '复制成功',
        type: 'success'
      })
    },
    loadPreview: function(id) {
      var _this = this;
      request({
        url: '/information/vInformation/loadPreview',
        method: 'post',
        params: { id: id }
      }).then(res => {
        setTimeout(function() {
          _this.preview.previewUrl = res.data.previewUrl;
          _this.preview.href = res.data.href;
          _this.preview.previewUrlCode = _this.preview.previewUrl.replace(/%23/g, '#');
        }, 100)
      });
    },
    close: function() {
      this.preview.previewUrlCode = '';
      this.$emit('close');
    }
  }
}
</script>
<style>
  body {
    margin: 0;
    padding: 0;
  }
  .qrcode-img {
    width: 200px;
    height: 200px;
  }
  .phone {
    width: 378px;
    height: 709px;
    background-image: url("../../assets/icon/bg-phone.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
  }
  .phone>.main {
    border: none;
    background: #FFF;
    position: absolute;
    top: 72px;
    left: 24px;
    padding: 0 5px;
    width: 250px;
    height: 445px;
    overflow-y: scroll;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  .main img {
    width: 100%;
  }
  .main::-webkit-scrollbar{
    width:0px;
  }
  .main>.content {
    margin-bottom: 31px;
    font-size: 12px;
  }
  .main>.title {
    border-bottom: 1px solid #ddd;
    margin-bottom: 5px;
    padding-bottom: 5px;
  }
  .title > h1 {
    margin: 5px 0;
    color: #646464;
  }
  .title > small {
    color: #aaa;
  }
  .video-top{
    width: 280px;
    margin-bottom: 5px;
  }

  .video{
    width: 250px;
    top:71px;
    left: 24px;
    position: absolute;
  }

  .preview-main{
    width: 490px;
    height: 600px;
    top: 100px;
    position: absolute;
    left: 388px;
  }

  .preview-main-text1{
    display: inline;
    font-size: 14px;
  }

  .preview-main-text2{
    width: 230px;
    font-size: 16px;
  }

  .preview-input{
    width: 330px;
  }

  .preview-input-appLink {
    margin-top: 10px;
    width: 490px;
  }
  .preview-main .preview-main-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
  }
  .qr-code-img {
    flex-shrink:0;
    height: 100%;
  }
  .preview-url-copy {
    display: flex;
  }
  .preview-url-copy .input-item {
    flex: 9;
  }
  .preview-url-copy .preview-button {
    margin-left: 10px;
  }
  .download-app {
    display: none !important;
  }
  .qr-code-container {
    display: flex;
    flex-direction: column;
  }
</style>
